<template>
	<view class="userInfo-box">
		
		<!-- 名称头像区域 -->
		<view class="top-header">
			<image :src="userInfo.avatarUrl" mode="aspectFit" class="headeImg"></image>
			<view class="nickName"> {{ userInfo.nickName }} </view>
		</view>
		
		<!-- 面板区域 -->
		<view class="panel-box">
			<!-- 第一个面板 -->
			<view class="panel-one">
				
				<view class="one-item" v-for="(item,i) in oneTabbar" :key="i">
					<text class="nums">{{item.nums}}</text>
					<text class="text-tips">{{item.Text}}</text>
				</view>
					
		
			</view>
			
			<!-- 第二个面板 -->
			<view class="panel-two">
				<view class="two-title">
					我的订单
				</view>
				<view class="two-tipsBox">
					<view class="tipsBox-item" v-for="(item,i) in twoTabbar" :key="i">
						<uni-icons :type="item.icons" color="#c00000" size="40"></uni-icons>
						<text class="tip"> {{item.Text}} </text>
					</view>
				</view>
			</view>
			
			<!-- 第三个面板 -->
			<view class="panel-three">
				
				<view class="three-item">
					<view class="item-left">
						收货地址
					</view>
					<uni-icons type="right" size="16" ></uni-icons>
				</view>
				
				<view class="three-item">
					<view class="item-left">
						联系客服
					</view>
					<uni-icons type="right" size="16" ></uni-icons>
				</view>
				
				<view class="three-item" @click="logout">
					<view class="item-left">
						退出登录
					</view>
					<uni-icons type="right" size="16" ></uni-icons>
				</view>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		name:"my-useriInfo",
		data() {
			return {
				oneTabbar:{
					seller:{
						nums:8,
						Text:'收藏的店铺',
					},
					shop:{
						nums:8,
						Text:'收藏的商品'
					},
					likeShop:{
						nums:19,
						Text:'关注的商品'
					},
					life:{
						nums:80,
						Text:'足迹'
					}
				},
				twoTabbar:{
					seller:{
						icons:'settings',
						Text:'待付款'
					},
					shop:{
						icons:'cart-filled',
						Text:'待收货'
					},
					likeShop:{
						icons:'refresh',
						Text:'退款/退货'
					},
					life:{
						icons:'compose',
						Text:'全部订单'
					}
				},
			};
		},
		computed:{
			...mapState('m_user',['userInfo'])
		},
		methods:{
			...mapMutations('m_user',['updateAddress','updataUserInfo','updataToken']),
			async logout(){
				// 退出登录提示
				let [err,succ]=await uni.showModal({
					title:'提示',
					content:'是否退出登录'
				}).catch(err => err)

				if( succ && succ.confirm){
					// 清除退出登录的数据
					this.updateAddress({})
					this.updataUserInfo({})
					this.updataToken('')
					
				}
			}
		}
	}
</script>

<style lang="scss">
.userInfo-box{
	height: 100%;
	background-color: #F4F4F4;
	.top-header{
		height: 400rpx;
		background-color: #c00000;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.headeImg{
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			border: 2rpx solid #FFF;
			box-shadow: 0 4rpx 8rpx #000;
		}
		.nickName{
			margin-top: 20rpx;
			font-size: 40rpx;
			color: #FFF;
			font-weight: bold;
		}
	}

	// 内容区
	.panel-box{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: -20rpx;
		.panel-one{
			
			width: 90%;
			height: 120rpx;
			background-color: #FFF;
			display: flex;
			justify-content: space-between;
			align-content: center;
			padding: 0 20rpx;
			border-radius: 20rpx;
			.one-item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.text-tips{
					font-size: 30rpx;
				}
			}
		}
		
	}
	
	.panel-two{
		width: 90%;
		height: 300rpx;
		background-color: #FFF;
		margin-top: 20rpx;
		padding: 0rpx 20rpx;
		border-radius: 20rpx;
		.two-title{
			height: 100rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F4F4F4;
		}
		.two-tipsBox{
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			.tipsBox-item{
				display: flex;
				flex-direction: column;
				.tip{
					margin-top: 10rpx;
					text-align: center;
					font-size: 28rpx;
				}
			}
		}
		
	}
	
	.panel-three{
		width: 90%;
		border-radius: 20rpx;
		background-color: #FFF;
		padding: 0 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		.three-item{
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #f4f4f4;
			.item-left{
				font-size: 32rpx;
			}
		}
	}
}
</style>